<template>
	<view class="user">
		<!-- 用户信息和操作项的整体容器 -->
		<view class="userinfo">
			<!-- 顶部的用户信息区域 -->
			<view class="top">
				<!-- 用户头像区域，使用 uni-icons 组件显示一个填充的人物图标 -->
				<view class="avator">
					<uni-icons type="person-filled" size="30" :color="logColor"></uni-icons>
				</view>
				<!-- 显示用户的账号和电话信息，如果用户已登录 -->
				<view class="uanme" v-if="store.isLogin">
					<view>账号：{{store.userInfo.name}}</view>
					<view>电话：{{store.userInfo.phone}}</view>
				</view>
				<!-- 显示点击登录的文本，如果用户未登录，点击时触发 toLogin 函数 -->
				<view class="uname" v-else @tap="toLogin">点击登录</view>
			</view>
		</view>
		<!-- 用户操作项列表区域 -->
		<view class="list">
			<!-- 使用 uni-list 组件创建一个列表 -->
			<uni-list>
				<!-- 使用 v-for 遍历 manageList 数组生成列表项，显示标题、额外图标，并可点击，点击时触发 navto 函数 -->
				<uni-list-item v-for="item,index in manageList" :title="item.name" :show-extra-icon="true"
					:extra-icon="item.icon" clickable link @tap="navto(index)"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		userStore
	} from '@/store/userStore.js';

	// 存储用户头像图标的颜色，使用 ref 创建响应式引用
	let logColor = ref("#ccc");
	// 获取用户存储的实例
	let store = userStore();
	// 存储用户操作项列表，使用 ref 创建响应式数组，添加了 "成员分工" 项
	const manageList = ref([{
		name: '订单管理',
		icon: {
			color: '#56c48b',
			size: '22',
			type: 'shop'
		}
	}, {
		name: '地址管理',
		icon: {
			color: '#ff6700',
			size: '22',
			type: 'location-filled'
		}
	}, {
		name: '我的收藏',
		icon: {
			color: '#0225ff',
			size: '22',
			type: 'star'
		}
	}, {
		name: '设置',
		icon: {
			color: '#0081b9',
			size: '22',
			type: 'gear'
		}
	}, {
		name: '成员分工',
		icon: {
			color: '#0081b9',
			size: '22',
			type: 'staff'
		}
	}]);

	// 点击操作项时触发的函数，根据点击的项进行不同的操作
	function navto(index) {
		const itemName = manageList.value[index].name;
		if (itemName === '成员分工') {
			// 导航到成员页面
			uni.navigateTo({
				url: "/pages/member/member"
			});
		} else {
			// 显示点击的操作项名称的提示
			uni.showToast({
				title: `你点击的是${itemName}`
			});
		}
	}

	// 导航到登录页面的函数
	function toLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		});
	}
</script>
<style lang="scss">
	// 用户信息和操作项的整体样式
	.user {
		height: calc(100vh - 95px);
		background-color: $uni-bg-color-grey;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		font-family: Arial, sans-serif; // 设置字体

		// 用户信息区域的样式
		.userinfo {
			height: 200px;
			background-color:rgba(0, 0, 0, 0.1);
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 10px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease; // 添加过渡效果

			// 顶部区域的样式，包含头像和用户信息
			.top {
				display: flex;
				align-items: center;
				gap: 10px;
				margin-bottom: 15px; // 增加底部间距

				// 头像区域的样式，圆形头像，有边框
				.avator {
					width: 50px;
					height: 50px;
					background-color: #fff;
					border-radius: 50%;
					text-align: center;
					line-height: 50px;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2px solid #ddd;
				}

				// 用户信息文本的样式，白色字体，添加文字阴影
				.uname {
					color: #fff;
					font-size: 14px;
					padding-left: 5px;
					text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
				}
			}
		}

		// 用户操作项列表的样式
		.list {
			width: 710rpx;
			margin: 20rpx auto;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0, 0, 0);
			background-color: #fff;
			transition: all 0.3s ease; // 添加过渡效果

			// 列表项的样式，添加内边距和底部边框
			.uni-list-item {
				padding: 15px;
				border-bottom: 1px solid #eee;

				// 最后一个列表项去掉底部边框
				&:last-child {
					border-bottom: none;
				}

				// 列表项内容的布局，左右对齐
				.uni-list-item__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				// 列表项的额外图标样式，添加过渡效果
				.uni-list-item__extra-icon {
					transition: transform 0.3s ease;

					// 鼠标悬停时图标放大
					&:hover {
						transform: scale(1.2);
					}
				}
			}
		}
	}

	// 鼠标悬停时的效果，阴影加深
	.userinfo:hover,
	.list:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
</style>